<template>
	<view
		class="badge"
		:style="{
			position: 'absolute',
			top: top + 'px',
			right: right + 'px',
			zIndex: 999,
			width: size + 'px',
			height: size + 'px',
			borderRadius: size/2+'px',
			backgroundColor: color,
			opacity: blinkOpacity,
			transform: `scale(${blinkScale})`,
			lineHeight: size + 'px',
			textAlign: 'center'
		}"
	>
		<text :style="{ color: textColor, fontSize: textSize + 'px' }" v-if="text">{{ text }}</text>
	</view>
</template>

<script>
export default {
	props: {
		// 角标位置
		top: {
			type: Number,
			default: 0
		},
		right: {
			type: Number,
			default: 0
		},
		// 角标大小
		size: {
			type: Number,
			default: 20
		},
		// 角标颜色
		color: {
			type: String,
			default: '#ff3b30' // 红色
		},
		// 圆角样式（圆形：50%，方形：0）
		borderRadius: {
			type: String,
			default: '50%' // 默认圆形
		},
		// 闪烁配置
		blinkConfig: {
			type: Object,
			default: () => ({
				enable: true, // 是否启用闪烁
				duration: 1000, // 闪烁周期(ms)
				minOpacity: 0.4, // 最小透明度
				maxScale: 1.2 // 最大缩放比例
			})
		},
		// 角标内文字（可选）
		text: {
			type: String,
			default: ''
		},
		// 文字颜色
		textColor: {
			type: String,
			default: '#ffffff'
		},
		// 文字大小
		textSize: {
			type: Number,
			default: 12
		}
	},
	data() {
		return {
			blinkOpacity: 1, // 闪烁透明度
			blinkScale: 1, // 闪烁缩放
			blinkState: 0, // 闪烁进度(0-1)
			animationTimer: null,
			frameInterval: 30 // 动画帧间隔
		};
	},
	created() {
		if (this.blinkConfig.enable) {
			this.startBlinkAnimation();
		}
	},
	beforeDestroy() {
		if (this.animationTimer) {
			clearTimeout(this.animationTimer);
		}
	},
	methods: {
		// 启动闪烁动画
		startBlinkAnimation() {
			const update = () => {
				// 更新闪烁进度
				const progressPerFrame = (this.frameInterval / this.blinkConfig.duration) * 2;
				this.blinkState += progressPerFrame;
				if (this.blinkState > 1) {
					this.blinkState = 0;
				}

				// 计算透明度和缩放
				const sinValue = Math.sin(this.blinkState * Math.PI);
				this.blinkOpacity = this.blinkConfig.minOpacity + (1 - this.blinkConfig.minOpacity) * sinValue;
				this.blinkScale = 1 + (this.blinkConfig.maxScale - 1) * sinValue;

				// 继续动画
				this.animationTimer = setTimeout(update, this.frameInterval);
			};

			update();
		}
	}
};
</script>

<style scoped>
.badge {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	overflow: hidden;

}
</style>
